<template>
  <view class="home-page">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <uni-icons type="search" size="24" color="#999"></uni-icons>
        <input type="text" placeholder="搜索商品..." class="input-text"/>
      </view>
    </view>

    <!-- 轮播图 -->
    <swiper class="banner-swiper" indicator-dots circular autoplay interval="3000">
      <swiper-item v-for="(item, index) in banners" :key="index">
        <image :src="item.image" class="banner-image"></image>
      </swiper-item>
    </swiper>

    <!-- 分类入口 -->
    <view class="category-grid">
      <view class="category-item" v-for="(item, index) in categories" :key="index">
        <image :src="item.icon" class="category-icon"></image>
        <text class="category-name">{{item.name}}</text>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="goods-section">
      <view class="section-title">推荐商品</view>
      <view class="goods-list">
        <view class="goods-item" v-for="(item, index) in goods" :key="index">
          <image :src="item.image" class="goods-image"></image>
          <view class="goods-info">
            <text class="goods-title">{{item.title}}</text>
            <text class="goods-price">¥{{item.price.toFixed(2)}}</text>
            <button class="add-cart-btn" size="mini" type="primary">加入购物车</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';

interface Banner {
  id: number;
  image: string;
}

interface Category {
  id: number;
  name: string;
  icon: string;
}

interface Goods {
  id: number;
  title: string;
  price: number;
  image: string;
  sales: number;
}

export default defineComponent({
  setup() {
    // 轮播图数据
    const banners = ref<Banner[]>([
      { id: 1, image: '/static/banners/banner1.jpg' },
      { id: 2, image: '/static/banners/banner2.jpg' },
      { id: 3, image: '/static/banners/banner3.jpg' }
    ]);

    // 分类数据
    const categories = ref<Category[]>([
      { id: 1, name: '手机数码', icon: '/static/icons/phone.png' },
      { id: 2, name: '家用电器', icon: '/static/icons/electric.png' },
      { id: 3, name: '服装鞋帽', icon: '/static/icons/clothes.png' },
      { id: 4, name: '美妆个护', icon: '/static/icons/cosmetics.png' },
      { id: 5, name: '食品饮料', icon: '/static/icons/food.png' },
      { id: 6, name: '家居生活', icon: '/static/icons/home.png' },
      { id: 7, name: '母婴玩具', icon: '/static/icons/baby.png' },
      { id: 8, name: '运动户外', icon: '/static/icons/sports.png' }
    ]);

    // 商品数据
    const goods = ref<Goods[]>([
      { id: 1, title: '新款智能手机 128GB大存储', price: 2999, image: '/static/goods/phone.jpg', sales: 1280 },
      { id: 2, title: '超薄笔记本电脑 高性能处理器', price: 5999, image: '/static/goods/laptop.jpg', sales: 560 },
      { id: 3, title: '智能手表 心率监测 长续航', price: 899, image: '/static/goods/watch.jpg', sales: 2350 },
      { id: 4, title: '无线蓝牙耳机 主动降噪', price: 499, image: '/static/goods/headphones.jpg', sales: 3120 }
    ]);

    return {
      banners,
      categories,
      goods
    };
  }
});
</script>

<style scoped>
/* 页面容器 */
.home-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 搜索栏 */
.search-bar {
  padding: 10rpx 20rpx;
  background-color: #fff;
}

.search-input {
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 30rpx;
  padding: 12rpx 20rpx;
}

.input-text {
  margin-left: 10rpx;
  flex: 1;
  font-size: 28rpx;
  color: #333;
  background: transparent;
  border: none;
}

/* 轮播图 */
.banner-swiper {
  height: 300rpx;
  width: 100%;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 分类网格 */
.category-grid {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  padding: 20rpx 0;
}

.category-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10rpx;
}

.category-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 10rpx;
}

.category-name {
  font-size: 24rpx;
  color: #333;
}

/* 商品区域 */
.goods-section {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 0 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  padding: 20rpx 0;
  color: #333;
  border-bottom: 1rpx solid #eee;
}

.goods-list {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 0;
}

.goods-item {
  width: 48%;
  margin-right: 4%;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
}

.goods-item:nth-child(2n) {
  margin-right: 0;
}

.goods-image {
  width: 100%;
  height: 280rpx;
  border-radius: 10rpx;
  object-fit: cover;
}

.goods-info {
  padding: 10rpx 0;
}

.goods-title {
  font-size: 28rpx;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 40rpx;
}

.goods-price {
  font-size: 32rpx;
  color: #ff4400;
  margin: 10rpx 0;
  font-weight: bold;
}

.add-cart-btn {
  align-self: flex-end;
  margin-top: 10rpx;
}
</style>
